<template>
  <div>
    <a-form-model ref="form" :model="model" :rules="validatorRules" class="password-retrieval-form" @keyup.enter.native="nextStep">
      <a-form-model-item label="手机" required prop="phone" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="20">
            <a-input v-model="model.phone" type="text" autocomplete="false" placeholder="请输入手机号">
              <a-icon slot="prefix" type="phone" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item v-if="show" required prop="captcha" label="验证码" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="12">
            <a-input v-model="model.captcha" type="text" placeholder="手机短信验证码">
              <a-icon slot="prefix" type="code" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <a-button
              tabindex="-1"
              size="default"
              :disabled="state.smsSendBtn"
              @click.stop.prevent="getCaptcha"
              v-text="(!state.smsSendBtn && '获取验证码') || state.time + ' s'"
            ></a-button>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 19, offset: 5 }">
        <router-link style="float: left; line-height: 40px" :to="{ name: 'login' }">使用已有账户登录</router-link>
        <a-button type="primary" @click="nextStep" style="margin-left: 20px">下一步</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { postAction } from '@/api/manage';

export default {
  name: 'Step2',
  props: ['userList'],
  data() {
    return {
      model: {},
      loading: false,
      // accountName: this.userList.username,
      dropList: '0',
      captcha: '',
      show: true,
      state: {
        time: 60,
        smsSendBtn: false,
      },
      formLogin: {
        captcha: '',
        mobile: '',
      },
      validatorRules: {
        phone: [{ required: true, message: '请输入手机号码!' }, { validator: this.validatePhone }],
        captcha: [{ required: true, message: '请输入短信验证码!' }],
      },
    };
  },
  computed: {},
  methods: {
    nextStep() {
      let that = this;
      that.loading = true;
      this.$refs['form'].validate(success => {
        if (success == true) {
          let params = {
            phone: this.model.phone,
            smscode: this.model.captcha,
          };
          postAction('/sys/user/phoneVerification', params).then(res => {
            if (res.success) {
              console.log(res);
              let userList = {
                username: res.result.username,
                phone: params.phone,
                smscode: res.result.smscode,
              };
              setTimeout(function () {
                that.$emit('nextStep', userList);
              }, 0);
            } else {
              this.cmsFailed(res.message);
            }
          });
        }
      });
    },
    getCaptcha(e) {
      e.preventDefault();
      const that = this;
      that.$refs['form'].validateField('phone', err => {
        if (!err) {
          that.state.smsSendBtn = true;
          let interval = window.setInterval(() => {
            if (that.state.time-- <= 0) {
              that.state.time = 60;
              that.state.smsSendBtn = false;
              window.clearInterval(interval);
            }
          }, 1000);
          const hide = that.$message.loading('验证码发送中..', 0);
          let smsParams = {
            mobile: that.model.phone,
            smsmode: '2',
          };
          postAction('/sys/sms', smsParams).then(res => {
            if (!res.success) {
              setTimeout(hide, 1);
              that.cmsFailed(res.message);
            }
            setTimeout(hide, 500);
          });
        } else {
          that.cmsFailed(err);
        }
      });
    },
    cmsFailed(err) {
      this.$notification['error']({
        message: '验证错误',
        description: err,
        duration: 4,
      });
    },
    handleChangeSelect(value) {
      var that = this;
      console.log(value);
      if (value == 0) {
        that.dropList = '0';
        that.show = true;
      } else {
        that.dropList = '1';
        that.show = false;
      }
    },
    validatePhone(rule, value, callback) {
      if (value) {
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(value)) {
          callback('请输入正确的手机号');
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.stepFormText {
  margin-bottom: 24px;
}

.ant-form-item-label,
.ant-form-item-control {
  line-height: 22px;
}

.getCaptcha {
  display: block;
  width: 100%;
  height: 40px;
}
</style>
